(function() {// 一次函数
	var obj = {};

	obj.ajax = function(type, url, data, headers, context, callback) {

		$.ajax({
			url : url,
			type : type,
			data : JSON.stringify(data),
			headers : headers,
			context : context
		// 回调函数的this
		}).done(callback);
	};
	window.aj = obj;

})();

// format time
function formatDateTime(inputTime) {
	var date = new Date(inputTime);
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	m = m < 10 ? ('0' + m) : m;
	var d = date.getDate();
	d = d < 10 ? ('0' + d) : d;
	return y + '-' + m + '-' + d;
};

function CustomersComponent(template) {// 组件 封装customer的属性

	this.model = null;
	this.template = template;

	// add customer
	this.addCustomer = function(customer) {

		aj.ajax("POST", "customers/add", customer, {
			"content-Type" : "application/json"
		}, this, function(customer) {
			this.model.push(customer);
			_render(this.model);
		});

	};

	// update customer
	this.updateCustomer = function(customer) {

		aj.ajax("PUT", "customers/update", customer, {
			"content-Type" : "application/json"
		}, this, function(customer) {

			for (var i = 0; i < this.model.length; i++) {
				var c = this.model[i];
				if (c.id == customer.id) {
					this.model.splice(i, 1);
					this.model.splice(i, 0, customer)
				}
			}
			console.log(this.model)
			_render(this.model);
			$('#myModal').modal('hide');
		});
	};

	// find all customers
	this.findAllCustomers = function() {
		console.log("ddd")

		aj.ajax("GET", "/springMVC_day7/customers/listAll", null, null, this,
				function(customers) {
					console.log(customers)
					this.model = customers;
					console.log(this.model)
					_render(this.model);
				});
	};

	// render the table data
	function _render(data) {// 私有函数 不被暴露 vm

		template.empty();
		data.forEach(function(item) {

			var tr = $("<tr></tr>");
			var td1 = $("<td></td>");
			td1.html(item.name);
			var td2 = $("<td></td>");
			if (item.sex == true) {
				td2.html("Male");
			} else {
				td2.html("Female");
			}
			var td3 = $("<td></td>");
			td3.html(item.sal);
			var td4 = $("<td></td>");
			td4.html(formatDateTime(item.birth));
			var td5 = $("<td></td>");
			td5.append(($("<button/>").text("Delete")
					.addClass("btn btn-danger").attr("id", "deleteBtn")
					.data(item)));
			var td6 = $("<td></td>");
			td6.append(($("<button/>").text("Update").addClass(
					"btn btn-success").attr("id", "updateBtn").data(item)));
			tr.append(td1);
			tr.append(td2);
			tr.append(td3);
			tr.append(td4);
			tr.append(td5);
			tr.append(td6);
			$(template).append(tr);

		});

		// delete button listener
		$("button[id=deleteBtn]").on(
				"click",
				function(e) {
					$this = $(this);
					aj.ajax("DELETE", "customers/delete?id=" + $this.data().id,
							null, null, this, function() {
								data = data.filter(function(item) {
									return item.id != $this.data().id;
								});
								_render(data);
								window.location.reload();
							});
				});

		// modal button listener
		$("button[id=updateBtn]").on("click", function() {
			$this = $(this);
			var json = $this.data();
			$("input[name=u_id]").val(json.id);
			$("input[name=u_name]").val(json.name);
			if (json.sex == true) {
				$("input[name=u_sex]").first().prop("checked", true);
			} else {
				$("input[name=u_sex]").last().prop("checked", true);
			}
			$("input[name=u_sal]").val(json.sal);
			$("input[name=u_birth]").val(formatDateTime(json.birth));
			$('#myModal').modal('show')
		});

	}

}

$(function() {

	var compo = new CustomersComponent($("tbody"));
	compo.findAllCustomers();

	// add button listener
	$("form button").on(
			"click",
			function(e) {

				var name = $("input[name=name]").val();
				var sex = $("input[name=sex]:checked").val();
				var sal = $("input[name=sal]").val();
				var birth = $("input[name=birth]").val();
				if (name.length == 0 || sex.leng == 0 || sal.length == 0
						|| birth.length == 0) {
					swal("It's empty, please check!",
							"Please check all fields.");
					return;
				}
				var customer = {
					id : "null",
					name : name,
					sex : sex,
					sal : sal,
					birth : birth
				};
				compo.addCustomer(customer);
				e.preventDefault();
			});

	// update button listener
	$("#modalBtn").on("click", function() {
		var name = $("input[name=u_name]").val();
		var sex = $("input[name=u_sex]:checked").val();
		var sal = $("input[name=u_sal]").val();
		var birth = $("input[name=u_birth]").val();
		var uid = $("input[name=u_id]").val();
		var updateCustomer = {
			id : uid,
			name : name,
			sex : sex,
			sal : sal,
			birth : birth
		};
		compo.updateCustomer(updateCustomer);
	})

});